<template>
  <div class="test">
    <sys-contextmenu :data="items"></sys-contextmenu>

    <my-map ref="myMap" :center="[117.217199,39.130155]" @ready="onReady" height="100%" :adapter="adapter"></my-map>

    <div style="position: fixed; top: 10px; right: 10px;">
      <span @click="show1">电子地图</span>
      <span @click="show2">影像地图</span>
    </div>
  </div>
</template>

<script>
import myMap from '@/components/common/map/my-map'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

// 高德地图
const layer1 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'http://webrd03.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}&lang=zh_cn'
  })
})

// 高德卫星影像
const layer2 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    zIndex: 0
  })
})

// 高德路网注记
const layer3 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    zIndex: 1
  })
})

export default {
  name: 'test',
  cnName: '测试',
  components: {
    myMap
  },
  data() {
    return {
      items: [
        {icon: 'el-icon-plus', label: '新增'},
        {icon: 'el-icon-edit', label: '修改'}
      ],
      adapter({TileLayer, XYZ}) {
        return layer1
      }
    }
  },
  methods: {
    init() {

    },
    show1() {
      const map = this.$refs.myMap.map
      const layers = [].concat(map.getLayers().getArray())

      layers.forEach(layer => {
        const values_ = layer.values_
        if(values_ && values_.name === 'aMap') {
          map.removeLayer(layer)
        }
      })
      layer1.__MY_LAYER__ = true
      map.addLayer(layer1)
    },
    show2() {
      const map = this.$refs.myMap.map

      const layers = [].concat(map.getLayers().getArray())
      layers.forEach(layer => {
        const values_ = layer.values_
        if(values_ && values_.name === 'aMap') {
          map.removeLayer(layer)
        }
      })
      layer2.__MY_LAYER__ = true
      map.addLayer(layer2)
      map.addLayer(layer3)

    },
    onReady() {
      console.info('rrrrready')
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.test {
  height: 100%;
  padding: 0;
}


</style>
